

<!DOCTYPE html>
<html lang="zh_cn">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1, initial-scale=1, user-scalable=no">

	<!-- 载入基本资源库 -->
	<script type="text/javascript" src="js/lib/jquery.js"></script>
	<script type="text/javascript" src="js/lib/jquery-ui.min.js"></script>
	<script type="text/javascript" src="js/lib/jquery.fullPage.js"></script>

	<!-- 载入H5对象，进行内容管理 -->
	<script type="text/javascript" src="js/H5.js"></script>
	<link rel="stylesheet" type="text/css" href="css/H5.css">

	<!-- 载入H5_loading -->
	<script type="text/javascript" src="js/H5_loading.js"></script>
	<link rel="stylesheet" type="text/css" href="css/H5_loading.css">

	<title>H5项目--组件整合</title>
	
	<!-- 页面逻辑样式 -->
	<style type="text/css">
		
		body{
			margin: 0;
			padding: 0;
			font-family: "微软雅黑";
		}
		.h5_page{
			background: url('img/page_bg.png');
		}
		.h5_page_face{
			background: url('img/face_bg.png');
		}
		.h5_component_name_slogan{
			animation: rock 2s infinite 2s;
			-webkit-animation: rock 2s infinite 2s;
		}
		@-webkit-keyframes rock {
			0%{
				transform: rotate(0deg);
			}
			5%{
				transform: rotate(3deg);
			}
			10%{
				transform: rotate(-4deg);
			}
			15%{
				transform: rotate(3deg);
			}
			20%{
				transform: rotate(-2deg);
			}
			25%{
				transform: rotate(1deg);
			}
			30%{
				transform: rotate(-1deg);
			}
			70%{
				transform: rotate(0deg);
			}
			100%{
				transform: rotate(0deg);
			}
		}
		.h5_component_name_caption{
			background-image: url('img/page_caption_bg.png');
			width: 283px;
			height: 160px;
			text-align: center;
			font-size: 20px;
			color: #fff;
			line-height: 140px;
		}
		.h5_component_name_back{
			top: 30px;
			animation: back 2s infinite 2s;
			-webkit-animation: back 2s infinite 2s;
		}
		@-webkit-keyframes back{
			50%{
				top: 10px;
			}
		}

	</style>

</head>
	
<body>

	<div class="loading">
		<div class="double-bounce1"></div>
		<div class="double-bounce2"></div>
		<div id="rate"></div>
	</div>






	
	<!-- 载入H5相关组件资源 -->
	<script type="text/javascript">
		var res = ['Base','Bar','Bar-v','Pie','Point','PolyLine','Radar','Ring'];
		var html =[];
		for(i in res){
			html.push('<script type="text/javascript" src="js/H5Component'+res[i]+'.js"><\/script>');
			html.push('<link rel="stylesheet" type="text/css" href="css/H5Component'+res[i]+'.css">');
		}
		document.write(html.join(''));

	</script>
	

	
	<!-- 程序逻辑 -->
	<script type="text/javascript">

		$(function(){
			var h5 = new H5();
			h5.whenAddPage = function(){
				this.addComponent('slide_up', {
					bg: 'img/footer.png',
					css: {
						width: '100%',
						height: '20px',
						left: 0,
						bottom: -20,
						opacity: 0,
						zIndex: 9999
					},
					animateIn: {
						opacity: 1,
						bottom: 0
					},
					animateOut: {
						opacity: 0,
						bottom: -20
					},
					delay: 500
				});
			}
			// h5
			// .addPage('face')   //首页
			// 	.addComponent('logo', {
			// 		center: true,
			// 		width: 395,
			// 		height: 130,
			// 		bg: 'img/face_logo.png',
			// 		css: {
			// 			opacity: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 100
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 0
			// 		}
			// 	})
			// 	.addComponent('slogan', {
			// 		center: true,
			// 		width: 365,
			// 		height: 99,
			// 		bg: 'img/face_slogan.png',
			// 		css: {
			// 			opacity: 0,
			// 			top: 180
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			left: '50%'
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			left: '0%'
			// 		},
			// 		delay: 500
			// 	})
			// 	.addComponent('face_img_left', {
			// 		width: 370,
			// 		height: 493,
			// 		bg: 'img/face_img_left.png',
			// 		css: {
			// 			opacity: 0,
			// 			left: -60,
			// 			bottom: -60
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			left: 0,
			// 			bottom: 0
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			left: -60,
			// 			bottom: -60
			// 		},
			// 		delay: 1000
			// 	})
			// 	.addComponent('face_img_right', {
			// 		width: 276,
			// 		height: 449,
			// 		bg: 'img/face_img_right.png',
			// 		css: {
			// 			opacity: 0,
			// 			right: -100,
			// 			bottom: -60
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			right: 0,
			// 			bottom: 0
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			right: -100,
			// 			bottom: -60
			// 		},
			// 		delay: 1500
			// 	})
			// .addPage()   //描述页 
			// 	.addComponent('caption', {
			// 		text: '核心理念'
			// 	})
			// 	.addComponent('text', {
			// 		width: 500,
			// 		height: 30,
			// 		center: true,
			// 		text: 'IT教育网=只学有用的',
			// 		css: {
			// 			opacity: 0,
			// 			textAlign: 'center',
			// 			color: 'red',
			// 			fontSize: '26px'
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 120
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 240
			// 		}
			// 	})
			// 	.addComponent('description', {
			// 		width: 481,
			// 		height: 295,
			// 		center: true,
			// 		bg: 'img/description_bg.gif',
			// 		text: '2013年，IT教育网的诞生引领中国IT职业从教育进入了新时代；高质量实战课程、全新教学模式、实时互动学习、以领先优势打造行业品牌；迄今为止，IT教育网已成为中国最大、互动性最高的IT技能学习平台。',
			// 		css: {
			// 			opacity: 0,
			// 			padding: '15px 10px 10px 10px',
			// 			color: '#fff',
			// 			fontSize: '15px',
			// 			lineHeight: '18px',
			// 			textAlign: 'justify',
			// 			top: 240
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 190
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 240
			// 		},
			// 		delay: 1000
			// 	})
			// 	.addComponent('people', {
			// 		center: true,
			// 		width: 515,
			// 		height: 305,
			// 		bg: 'img/p1_people.png',
			// 		css: {
			// 			opacity: 0,
			// 			bottom: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			bottom: 40
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			bottom: 0
			// 		},
			// 		delay: 500
			// 	})
			// .addPage()
			// 	.addComponent('caption', {text: '课程分布方向'})  //PolyLine(折线图)
			// 	.addComponent('polyline', {
			// 		type: 'polyline',
			// 		data: [
			// 			['前端开发','0.7','#ff7676'],
			// 			['移动开发','0.4'],
			// 			['后端开发','0.20','blue'],
			// 			['数据处理','0.3']
			// 		],
			// 		width: 530,
			// 		height: 300,
			// 		center: true,
			// 		css: {
			// 			top: 200,
			// 			opacity: 0,
			// 			top: 100
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 250
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 100
			// 		}
			// 	})
			// 	.addComponent('msg', {
			// 		text: '前端开发课程占70%',
			// 		css: {
			// 			width: '100%',
			// 			color: 'red',
			// 			top: 300,
			// 			textAlign: 'center',
			// 			fontSize: '18px',
			// 			opacity: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 160
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 300
			// 		},
			// 		delay: 2500
			// 	})
			// .addPage()
			// 	.addComponent('caption', {text: '移动开发课程资源'})  //Pie(饼图)
			// 	.addComponent('pie', {
			// 		type: 'pie',
			// 		data: [
			// 			['Android','0.3','#ff7676'],
			// 			['Ios','0.2'],
			// 			['Webapp','0.15'],
			// 			['Cocos2d','0.2'],
			// 			['Unity3D','0.15']
			// 		],
			// 		width: 350,
			// 		height: 350,
			// 		center: true,
			// 		css: {
			// 			top: 400,
			// 			opacity: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 250
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 400
			// 		}
			// 	})
			// 	.addComponent('msg', {
			// 		text: 'Android开发课程占30%',
			// 		css: {
			// 			width: '100%',
			// 			color: 'red',
			// 			top: 300,
			// 			textAlign: 'center',
			// 			fontSize: '18px',
			// 			opacity: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 160
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 300
			// 		},
			// 		delay: 2000
			// 	})
			// .addPage()
			// 	.addComponent('caption', {text: '前端开发课程'})  //Bar(水平柱图)
			// 	.addComponent('bar', {
			// 		type: 'bar',
			// 		data: [
			// 			['Javascript', '0.5', '#ff7676'],
			// 			['HTML/CSS', '0.45', '#f90'],
			// 			['CSS3', '0.1', 'maroon'],
			// 			['HTML5', '0.2'],
			// 			['Jquery', '0.35'],
			// 			['Bootstrap', '0.2'],
			// 			['AngularJs', '0.09']
			// 		],
			// 		width: 530,
			// 		height: 600,
			// 		center: true,
			// 		css: {
			// 			bottom: 20,
			// 			opacity: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			bottom: 40
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			bottom: 20,
			// 		}
			// 	})
			// 	.addComponent('msg', {
			// 		text: 'Javascript开发课程占50%',
			// 		css: {
			// 			width: '100%',
			// 			color: 'red',
			// 			top: 300,
			// 			textAlign: 'center',
			// 			fontSize: '18px',
			// 			opacity: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 160
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 300
			// 		},
			// 		delay: 2500
			// 	})
			// .addPage()
			// 	.addComponent('caption', {text: '前端开发课程'})  //Bar-v(垂直柱图)
			// 	.addComponent('bar_v', {
			// 		type: 'bar_v',
			// 		data: [
			// 			['Javascript', '0.5', '#ff7676'],
			// 			['HTML', '0.45', '#f90'],
			// 			['CSS3', '0.3', 'maroon'],
			// 			['HTML5', '0.35'],
			// 			['JQuery', '0.4'],
			// 			['Bootstrap', '0.2']
			// 		],
			// 		width: 600,
			// 		height: 400,
			// 		center: true,
			// 		css: {
			// 			bottom: 100,
			// 			opacity: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			bottom: 150
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			bottom: 100,
			// 		}
			// 	})
			// 	.addComponent('msg', {
			// 		text: 'Bootstrap开发课程占20%',
			// 		css: {
			// 			width: '100%',
			// 			color: 'red',
			// 			top: 300,
			// 			textAlign: 'center',
			// 			fontSize: '18px',
			// 			opacity: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 160
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 300
			// 		},
			// 		delay: 2500
			// 	})
			// .addPage()
			// 	.addComponent('caption', {text: '后端开发课程'})  //Radar(雷达图)
			// 	.addComponent('radar', {
			// 		type: 'radar',
			// 		data: [
			// 			['Java', '0.7', '#ff7676'],
			// 			['PHP', '0.45', '#f90'],
			// 			['.net', '0.3', 'maroon'],
			// 			['Ruby', '0.2'],
			// 			['Python', '0.35'],
			// 			['Node.js', '0.3'],
			// 			['C++', '0.5', '#ff7676']
			// 		],
			// 		width: 400,
			// 		height: 400,
			// 		center: true,
			// 		css: {
			// 			opacity: 0,
			// 			bottom: 50
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			bottom: 120
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			bottom: 50
			// 		}
			// 	})
			// 	.addComponent('msg', {
			// 		text: 'Java开发课程占70%',
			// 		css: {
			// 			width: '100%',
			// 			color: 'red',
			// 			top: 300,
			// 			textAlign: 'center',
			// 			fontSize: '18px',
			// 			opacity: 0
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 160
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 300
			// 		},
			// 		delay: 2500
			// 	})
			// .addPage()
			// 	.addComponent('caption', {text: '课程报名人数过万'})  //Ring(环图)
			// 	.addComponent('ring-all', {
			// 		type: 'ring',
			// 		data: [
			// 			['总课程' , 0.86  ,'#ff7676']
			// 		],
			// 		width: 300,
			// 		height: 300,
			// 		center: true,
			// 		css: {
			// 			fontSize: '18px',
			// 			opacity: 0,
			// 			top: 120
			// 		},
			// 		animateIn: {
			// 			opacity: 1
			// 		},
			// 		animateOut: {
			// 			opacity: 0
			// 		}
			// 	})
			// 	.addComponent('ring-1', {
			// 		type: 'ring',
			// 		data: [
			// 			['前端开发' , 0.87  ,'darkorange']
			// 		],
			// 		width: 140,
			// 		height: 140,
			// 		css: {
			// 			fontSize: '12px',
			// 			opacity: 0,
			// 			bottom: 150,
			// 			left: '10%'
			// 		},
			// 		animateIn: {
			// 			opacity: 1
			// 		},
			// 		animateOut: {
			// 			opacity: 0
			// 		},
			// 	})
			// 	.addComponent('ring-2', {
			// 		type: 'ring',
			// 		data: [
			// 			['后端开发' , 0.30  ,'green']
			// 		],
			// 		width: 140,
			// 		height: 140,
			// 		center: true,
			// 		css: {
			// 			fontSize: '12px',
			// 			opacity: 0,
			// 			bottom: 150,
			// 		},
			// 		animateIn: {
			// 			opacity: 1
			// 		},
			// 		animateOut: {
			// 			opacity: 0
			// 		},
			// 	})
			// 	.addComponent('ring-3', {
			// 		type: 'ring',
			// 		data: [
			// 			['移动开发' , 0.46  ,'maroon']
			// 		],
			// 		width: 140,
			// 		height: 140,
			// 		css: {
			// 			fontSize: '12px',
			// 			opacity: 0,
			// 			bottom: 150,
			// 			right: '10%'
			// 		},
			// 		animateIn: {
			// 			opacity: 1
			// 		},
			// 		animateOut: {
			// 			opacity: 0
			// 		},
			// 	})
			// 	.addComponent('ring-4', {
			// 		type: 'ring',
			// 		data: [
			// 			['图像处理' , 0.31  ,'blue']
			// 		],
			// 		width: 140,
			// 		height: 140,
			// 		css: {
			// 			fontSize: '12px',
			// 			opacity: 0,
			// 			bottom: 70,
			// 			left: '25%'
			// 		},
			// 		animateIn: {
			// 			opacity: 1
			// 		},
			// 		animateOut: {
			// 			opacity: 0
			// 		},
			// 	})
			// 	.addComponent('ring-5', {
			// 		type: 'ring',
			// 		data: [
			// 			['数据处理' , 0.40  ,'red']
			// 		],
			// 		width: 140,
			// 		height: 140,
			// 		css: {
			// 			fontSize: '12px',
			// 			opacity: 0,
			// 			bottom: 70,
			// 			right: '25%'
			// 		},
			// 		animateIn: {
			// 			opacity: 1
			// 		},
			// 		animateOut: {
			// 			opacity: 0
			// 		},
			// 	})
			// 	.addComponent('msg', {
			// 		text: '不同课程报名人数超过一万占比',
			// 		css: {
			// 			width: '100%',
			// 			color: 'red',
			// 			top: 300,
			// 			textAlign: 'center',
			// 			fontSize: '18px',
			// 			opacity: 0,
			// 			top: 400
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 300
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 400
			// 		},
			// 		delay: 2000
			// 	})
			// .addPage()
			// 	.addComponent('caption', {text: '课程难度分布'})  //Point(散点图)
			// 	.addComponent('point', {
			// 		type: 'point',
			// 		data: [
			// 			['中级', '0.5', '#ff7676'],
			// 			['初级', '0.2', '#ffa3a4', '0', '-60%'],
			// 			['高级', '0.3', '#99c1ff', '50%', '120%']
			// 		],
			// 		width: 300,
			// 		height: 300,
			// 		center: true,
			// 		css: {
			// 			opacity: 0,
			// 			bottom: '10%'
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			bottom: '35%'
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			bottom: '10%'
			// 		}
			// 	})
			// .addPage('tail')   //尾页
			// 	.addComponent('logo', {
			// 		center: true,
			// 		width: 359,
			// 		height: 129,
			// 		bg: 'img/tail_logo.png',
			// 		css: {
			// 			opacity: 0,
			// 			top: 240
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 210
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 240
			// 		}
			// 	})
			// 	.addComponent('slogan', {
			// 		// center: true,
			// 		width: 314,
			// 		height: 46,
			// 		bg: 'img/tail_slogan.png',
			// 		css: {
			// 			opacity: 0,
			// 			top: 280
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			left: '30%'
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			left: '0%'
			// 		},
			// 		delay: 500
			// 	})
			// 	.addComponent('share', {
			// 		width: 128,
			// 		height: 120,
			// 		bg: 'img/tail_share.png',
			// 		css: {
			// 			opacity: 0,
			// 			top: 110,
			// 			right: 110
			// 		},
			// 		animateIn: {
			// 			opacity: 1,
			// 			top: 10,
			// 			right: 10
			// 		},
			// 		animateOut: {
			// 			opacity: 0,
			// 			top: 110,
			// 			right: 110
			// 		},
			// 		delay: 1000
			// 	})
			// 	.addComponent('back', {
			// 		center: true,
			// 		width: 52,
			// 		height: 50,
			// 		bg: 'img/tail_back.png',
			// 		onclick: function(){
			// 			$.fn.fullpage.moveTo(1);
			// 		}
			// 	})
			
			// $.getJSON('data.json',function(json){
			// 	console.log(json);
			// });
			
			$.ajax({
				type: 'get',
				url: 'data.json',
				dataType: 'json',
				data: {},
				success: function(data){
					$.each(data,function(index,value){
						if(value.isPage == true){
							h5.addPage(value.name,value.text);
						}else if(value.isPage == false){
							h5.addComponent(value.name,value.cfg);
							if(value.name == 'back'){
								$('.h5_component_name_back').on('click',function(){
									$.fn.fullpage.moveTo(1);
								});
							}
						}
					});
					h5.loader([
						'img/page_bg.png',
						'img/face_bg.png',
						'img/page_caption_bg.png', 	
						'img/footer.png',
						'img/face_logo.png',
						'img/face_slogan.png',
						'img/face_img_left.png',
						'img/face_img_right.png',
						'img/description_bg.gif',
						'img/p1_people.png',
						'img/tail_logo.png',
						'img/tail_slogan.png',
						'img/tail_share.png',
						'img/tail_back.png'
					]);
				}
			});
			// .loader([
			// 	'img/page_bg.png',
			// 	'img/face_bg.png',
			// 	'img/page_caption_bg.png', 	
			// 	'img/footer.png',
			// 	'img/face_logo.png',
			// 	'img/face_slogan.png',
			// 	'img/face_img_left.png',
			// 	'img/face_img_right.png',
			// 	'img/description_bg.gif',
			// 	'img/p1_people.png',
			// 	'img/tail_logo.png',
			// 	'img/tail_slogan.png',
			// 	'img/tail_share.png',
			// 	'img/tail_back.png'
			// ]);
		});

	</script>

	
</body>
</html>